<template>
  <div class="wallet">
    <div class="my-header">
      <i class="back" @click="$router.go(-1)"></i>
      <strong>余额交易记录</strong>
      <i class="myMsg"></i>
    </div>
    <div class="record-container" v-if="recordList!=''">
      <ul v-infinite-scroll="fetchData" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <li v-for="(item,index) in recordList" :key="index">
          <div class="record-item">
            <div class="item-left">
              <p> 交易编号：{{item.balanceCode}} </p>
              <p> 交易类型：<span v-if="item.balanceType===1">采购</span>
                <span v-else-if="item.balanceType===2">充值</span>
                <span v-else>退款</span>
              </p>
              <p class="date"> {{item.createDate|formatDate( 'yyyy-MM-dd')}}
              </p>
            </div>
            <div class="item-right">
              <span v-if="item.balanceType===1" class="text-red"> -{{item.userPrice|formatMoney}}</span>
              <span v-else-if="item.balanceType===2" class="text-green"> +{{item.userPrice|formatMoney}}</span>
              <span v-else class="text-green">+{{item.userPrice|formatMoney}}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'

  import {
    getwalletRecord
  } from '@/api/user'
  export default {
    data() {
      return {
        recordList: [],
        loading: false,
        params: {
          pageIndex: 1,
          pageSize: 20
        },
        hasNext: true
      }
    },
    watch: {},
    computed: {
      ...mapGetters([
        'userInfo'
      ])
    },
    methods: {
      // loadMore() {
      //   this.loading = true
      //   setTimeout(() => {
      //     this.params.pageSize += 1
      //     this.fetchData()
      //     this.loading = false
      //   }, 2500)
      // },
      fetchData() {
        this.loading = true
        if (!this.userInfo) return
        const params = {
          pageIndex: this.params.pageIndex,
          pageSize: this.params.pageSize,
          userId: this.userInfo.id
        }
        if (!this.hasNext) return
        // 获取余额交易列表
        getwalletRecord(params).then(res => {
          this.recordList = this.recordList.concat(res.data.balanceInfoList)
          this.hasNext = res.data.hasNext
          this.params.pageIndex += 1
          this.loading = false
        }).catch(err => {
          console.log(err)
        })
      }
    },
    mounted() {
      this.fetchData()
    }
  }

</script>
<!-- record -->
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';
  .my-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: 1.25rem;
    background: #fff;
    padding: $padding;
    @include flexbox(space-between, center, row, nowrap);
    border-bottom: 1px solid #eee;
    .back {
      display: block;
      width: .65rem;
      height: .65rem;
      background: url('~assets/common/images/arrow-left.png') no-repeat;
      background-size: 100%;
    }
    strong {
      font-size: 18px;
      font-weight: normal;
      color: #333;
    }
    .bheedit {
      font-size: 12px;
    }
  }

  .record-container {
    padding-top: 1.25rem;
    .record-item {
      font-size: 14px;
      padding: $padding;
      background: #fff;
      @include flexbox(space-between,
      flex-start,
      row,
      nowrap);
      border-bottom: 1px solid #EAEEF1;
      line-height: 24px;
      .date {
        color: $gray;
      }

      .item-right {
        .text-red {
          color: $red;
        }
        .text-green {
          color: #39BD48;
        }
      }
    }
  }

</style>
